<template>
  <div class="form-single-fragment" style="position: relative;">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="140px" size="mini" label-position="right">
      <el-row :gutter="20" class="form-single-info">
        <el-col :span="20">
          <el-col :span="12">
            <el-form-item label="知识类型名称" prop="typeName">
              <el-input class="input-item" v-model="ruleForm.typeName" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="类型级别" prop="typeLevel">
              <el-select v-model="ruleForm.typeLevel" placeholder="请选择">
                <el-option label="1级类型" value="1"></el-option>
                <el-option label="2级类型" value="2"></el-option>
                <el-option label="3级类型" value="3"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="ruleForm.typeLevel>1">
            <el-form-item label="上级类型" prop="parentId">
              <el-cascader
                v-model="parentId"
                ref="ref_cascader"
                :options="knowledgetypeTree"
                :props="optionProps"
                :show-all-levels="false"
                clearable
                @change="handleChange"></el-cascader>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item style="padding: 20px 0;">
              <el-button size="mini" @click="onCancel(false)">取消</el-button>
              <el-button type="primary" size="mini" @click="submitForm()">保存</el-button>
            </el-form-item>
          </el-col>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { Knowledgetype } from '@/api/business.js';
export default {
  name: 'Knowledgetypeadd',
  props: {
    knowledgeId: {
      default: undefined
    }
  },
  data () {
    return {
      loading: false,
      isShowloading: false,
      userId: null,
      knowledgetypeTree: [],
      parentId: [],
      optionProps: {
        value: 'id',
        label: 'typeName',
        children: 'children'
      },
      ruleForm: {
        typeName: '',
        typeLevel: '',
        parentId: ''
      },
      rules: {
        typeName: [{ required: true, message: '请输入', trigger: 'blur' }],
        typeLevel: [{ required: true, message: '请选择', trigger: 'change' }],
        parentId: [{ required: true, message: '请选择', trigger: 'blur' }]
      }
    };
  },
  created () {
    this.loadKnowledgetypeTree();
  },
  computed: {
    isEdit () {
      return this.knowledgeId != null && this.knowledgeId !== '';
    }
  },
  mounted () {
    if (this.isEdit) {
      this.loadKnowledgetypedetail()
    }
  },
  methods: {
    /**
     * 业务类型详情
     */
    loadKnowledgetypedetail () {
      let params = this.knowledgeId
      return new Promise((resolve, reject) => {
        Knowledgetype.detail(this, params).then(res => {
          this.ruleForm = res.data
          this.ruleForm.typeLevel = res.data.typeLevel.toString()
          this.parentId.push(res.data.parentId)
          this.$forceUpdate()
        }).catch(e => {
          reject(e);
        });
      });
    },
    /**
     * 业务类型信息表树形列表
     */
    loadKnowledgetypeTree () {
      return new Promise((resolve, reject) => {
        Knowledgetype.tree(this).then(res => {
          this.knowledgetypeTree = res.data
        }).catch(e => {
          reject(e);
        });
      });
    },
    handleChange () {
      let info = this.parentId
      let length = info.length - 1
      if (this.ruleForm.typeLevel === '2') {
        this.ruleForm.parentId = info[length]
        this.$refs['ref_cascader'].dropDownVisible = false
      } else if (this.ruleForm.typeLevel === '3') {
        if (length === 0) {
          this.parentId = []
          this.$message({
            showClose: true,
            message: '当前选择不是二级业务！',
            type: 'warning'
          });
          this.$refs['ref_cascader'].dropDownVisible = true
        } else {
          this.ruleForm.parentId = info[length]
          this.$refs['ref_cascader'].dropDownVisible = false
        }
      }
    },
    /**
     * 提交表单
     */
    submitForm () {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          this.isShowloading = true;
          let params = this.ruleForm;
          if (this.isEdit) { // 修改
            return new Promise((resolve, reject) => {
              Knowledgetype.update(this, params).then(res => {
                this.$message({
                  showClose: true,
                  message: '修改成功！',
                  type: 'success'
                });
                this.onCancel(true);
              }).catch(e => {
                reject(e);
              });
            });
          } else { // 添加
            return new Promise((resolve, reject) => {
              Knowledgetype.add(this, params).then(res => {
                this.$message({
                  showClose: true,
                  message: '添加成功！',
                  type: 'success'
                });
                this.onCancel(true);
              }).catch(e => {
                reject(e);
              });
            });
          }
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    onCancel (isSuccess) {
      if (this.observer != null) {
        this.observer.cancel(isSuccess);
      }
    }
  }
}
</script>

<style scoped>
h3{border-bottom: 1px solid #E9E9EB;padding: 0 0 10px;}
.table_container{margin: 10px 0;}
.form-single-info{display: flex;justify-content: center;}
.el-form-info{box-shadow: 0 0 10px rgba(0,0,0,0.05);padding: 20px;}
.el-form-info strong{margin: 0 10px;}
.el-form-info .el-time-picker{width: 100%;}
</style>
